import { App } from "vue"

export function tabChange(app: App) {
    app.directive('tab', {
        mounted(el: HTMLElement, binding) {
            let { className, activeName, currentIndex, click } = binding.value
            let tabs = el.querySelectorAll('.' + binding.value.className)
            tabs.forEach((item, index) => {
                item.addEventListener('click', () => {
                    click(index)
                })
            })
            tabs[currentIndex].className += ' ' + activeName
        },
        updated(el: HTMLElement, binding) {

            let { className, activeName, currentIndex } = binding.value
            let oldIndex = binding.oldValue.currentIndex
            let tabs = el.querySelectorAll('.' + binding.value.className)
            let calssNames = tabs[currentIndex].className
            tabs[oldIndex].className = calssNames
            tabs[currentIndex].className += ' ' + activeName
        }
    })
}